<template>
    <div class="login-box">
        <div class="login-head">
            <h1>登录</h1>
        </div>
        <el-form class="login-form">
            <el-input size="small" type="text" placeholder="用户名" v-model="model.username"/>
            <el-input size="small" type="password" placeholder="密码" v-model="model.password"
                      @keyup.native.enter="login"/>
            <el-button size="small" @click="login">登录</el-button>
        </el-form>
    </div>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElNotification, ElInput, ElForm, ElButton } from 'element-plus';
import { AuthType } from '@/types/AuthType';

export default defineComponent({
    components: {
        ElForm,
        ElInput,
        ElButton,
    },
    setup(props, ctx) {
        const vm = getCurrentInstance();
        const $router = useRouter();
        const model = ref(new AuthType());
        const login = async () => {
            try {
                if (model.value.password && model.value.username) {
                    localStorage.username = model.value.username;
                    $router.push('/');
                } else {
                    ElNotification({
                        type: 'error',
                        message: '请填写用户名密码',
                    });
                }
            } catch (e) {
                ElNotification({
                    type: 'error',
                    message: '登录失败',
                });
            }
        };
        return {
            model,
            login,
        };
    },
});
</script>
<style lang="scss" scoped>
.el-dropdown {
    position: absolute;
    top: 0;
    right: 0;
}

.login-box {
    width: 600px;
    margin: 5% auto 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);

    .login-head {
        padding: 10px 15px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        color: #333;
        background-color: #f5f5f5;

        h1 {
            font-size: 36px;
            margin-top: 20px;
            margin-bottom: 10px;
            font-weight: 500;
            line-height: 1.1;
        }
    }

    .login-form {
        display: flex;
        justify-content: space-between;
        padding: 15px;

        .el-input {
            width: 200px;
        }
    }
}
</style>
